<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<!--







-->
<style>
    .flex-box{
        display: flex;
        flex-wrap: wrap;
    }
    .flex-ibox{
        display: inline-flex;
        flex-wrap: wrap;
    }

    .flex-box--nowrap{
        flex-wrap: wrap;
    }
    .flex-box--nowrap{
        flex-wrap: nowrap;
    }
/**row**/
    .flex-box--row-s
    .flex-ibox--row-s{
        flex-direction: row;
        justify-content: flex-start;
        align-content: flex-start;
    }

    .flex-box--row-e,
    .flex-ibox--row-e{
        flex-direction: row;
        justify-content: flex-end;
        align-content: flex-start;
    }
    .flex-box--row-c,
    .flex-ibox--row-c{
        flex-direction: row;
        justify-content: center;
        align-content: flex-start;
    }
    .flex-box--row-cc,
    .flex-ibox--row-cc{
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .flex-box--row-b,
    .flex-ibox--row-b{
        flex-direction: row;
        justify-content: space-between;
        align-content: flex-start;
    }
    .flex-box--row-a,
    .flex-ibox--row-a{
        flex-direction: row;
        justify-content: space-around;
        align-content: flex-start;
    }

    /**row-reverse**/
    .flex-box--rowr-s
    .flex-ibox--rowr-s{
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-content: flex-start;
    }





    /**column**/
    .flex-box--column-s, .flex-ibox--column-s{
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .flex-box--column-e,.flex-ibox--column-e{
        flex-direction: column;
        justify-content: flex-end;
        align-content: flex-start;
    }
    .flex-box--column-c, .flex-ibox--column-c{
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    .flex-box--column-b,.flex-ibox--column-b{
        flex-direction: column;
        justify-content: space-between;
        align-content: flex-start;
    }
    .flex-box--column-a, .flex-ibox--column-a{
        flex-direction: column;
        justify-content: space-around;
        align-content: flex-start;
    }
    .flex-box--column-cc, .flex-ibox--column-cc{
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }






</style>
<style>
    .flex-box{
        width:100%;
        border:1px solid #f0f;
        box-sizing: border-box;
    }
    .flex-ibox{
        display: inline-flex;
        border:1px solid #f0f;
        box-sizing: border-box;
        vertical-align: bottom;
    }
    .flex-box__item{
        width:50px;
        height:50px;
        border:1px solid #4abfff;
        box-sizing: border-box;
    }
</style>


<div>
<div style="color:#f00;" ><br><br><br>demo-1</div>
<style>
    .flex-box--demo1{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:flex-start;
        align-items: flex-start;
        align-content:inherit;
    }
</style>
<div class="flex-box flex-box--demo1" style="height:200px;width:100%;">
    <div class="flex-box__item">1</div>
    <div class="flex-box__item">2</div>
    <div class="flex-box__item">3</div>
    <div class="flex-box__item">4</div>
    <div class="flex-box__item">5</div>
</div>
<br/>
<div class="flex-box flex-box--demo1" style="height:300px;width:152px;">
    <div class="flex-box__item">1</div>
    <div class="flex-box__item">2</div>
    <div class="flex-box__item">3</div>
    <div class="flex-box__item">4</div>
    <div class="flex-box__item">5</div>

</div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-2</div>
    <style>
        .flex-box--demo2{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:flex-start;
            align-items: inherit;
            align-content:flex-start;
        }
    </style>
    <div class="flex-box flex-box--demo2" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo2" style="height:200px;width:202px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-3</div>
    <style>
        .flex-box--demo3{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:center;
            align-items: inherit;
            align-content:inherit;
        }
    </style>
    <div class="flex-box flex-box--demo3" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo3" style="height:200px;width:202px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-4</div>
    <style>
        .flex-box--demo4{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:center;
            align-items: inherit;
            align-content:flex-start;
        }
    </style>
    <div class="flex-box flex-box--demo4" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo4" style="height:200px;width:202px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-5</div>
    <style>
        .flex-box--demo5{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:flex-end;
            align-items: inherit;
            align-content:inherit;
        }
    </style>
    <div class="flex-box flex-box--demo5" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo5" style="height:200px;width:202px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-6</div>
    <style>
        .flex-box--demo6{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:flex-end;
            align-items: inherit;
            align-content:flex-start;
        }
    </style>
    <div class="flex-box flex-box--demo6" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo6" style="height:200px;width:202px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-7</div>
    <style>
        .flex-box--demo7{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:flex-start;
            align-items: inherit;
            align-content:center;
        }
    </style>
    <div class="flex-box flex-box--demo7" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo7" style="height:200px;width:202px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>

<div>
    <div style="color:#f00;" ><br><br><br>demo-7</div>
    <style>
        .flex-box--demo8{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:flex-start;
            align-items: inherit;
            align-content:space-around;
        }
    </style>
    <div class="flex-box flex-box--demo8" style="height:200px;width:100%;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
    <br/>
    <div class="flex-box flex-box--demo8" style="height:200px;width:102px;">
        <div class="flex-box__item">1</div>
        <div class="flex-box__item">2</div>
        <div class="flex-box__item">3</div>
        <div class="flex-box__item">4</div>
        <div class="flex-box__item">5</div>
    </div>
</div>










<div class="flex-box--rxwsia"></div>









<br/>
<br/>
<br/>
<br/>
</body>
</html>